<template>
  <div>
    <div class="header">
      <img src="@/assets/images/return.png" class="header_img" @click="back"/>
      <div class="title">工作经历</div>
      <img  class="more" src="@/assets/images/more@2x.png" @click="showBox"/>
      <div :class="{toolBox:true, toolBoxSHow: showTool }">
        <div>修改</div>
        <div>删除</div>
      </div>
    </div>
    <div class="base_message">
      <div class="inputGroup">
        <div class="input_title">公司</div>
        <div class="input_value">{{workExper.company}}</div>
      </div>
      <div class="inputGroup">
        <div class="input_title">职位</div>
        <div class="input_value">{{workExper.position}}</div>
      </div>
      <div class="inputGroup">
        <div class="input_title">开始时间</div>
        <div class="input_value">{{workExper.startTime}}</div>
      </div>
      <div class="inputGroup">
        <div class="input_title">结束时间</div>
        <div class="input_value">{{workExper.endTime}}</div>
      </div>
    </div>
    <div class="base_message">
      <div class="work_describe">
        <div class="work_title">经历描述</div>
        <div class="work_text">
          <div class="work_p" v-html="workExper.experienceDesc"></div>
        </div>
      </div>
    </div>
    <div class="base_message">
      <div class="workProve">
        <div class="prove_title">工作证明</div>
        <div class="prove_picture">
          <div class="pic"><img src="@/assets/images/proveAdd.png" class="prove-add"/></div>
        </div>
        <div class="prove_explain">工作证明可以是个人名片、在职证明、工牌、工作邮箱截图、钉钉截图等，必须清晰可认、包含本人信息</div>
      </div>
    </div>
  </div>
</template>

<script>
  import TextArea from './TextArea'
  export default {
    name: "WorkExperimentView",
    components: {
      TextArea
    },
    mounted() {
      let workExperiment = this.$store.state.workExperiment
      const index = this.$route.params.index
      this.workExper.company = workExperiment[index].company
      this.workExper.position = workExperiment[index].position
      this.workExper.startTime = workExperiment[index].startTime
      this.workExper.endTime = workExperiment[index].endTime
      this.workExper.experienceDesc = workExperiment[index].experienceDesc
      this.workExper.workCertificate = workExperiment[index].workCertificate
    },
    data() {
      return {
        showTool:false,
        basicInfoID: null,
        workExper: {
          company: null,
          position: null,
          startTime: null,
          endTime: null,
          experienceDesc: null
        }
      }
    },
    methods: {
      showBox(){
        this.showTool = !this.showTool
      },
      back() {
        this.$router.back()
      }
    }
  }
</script>

<style scoped>
  .toolBox{
    font-size: 32px;
    position: absolute;
    bottom: -210px;
    border-radius: 8px;
    box-shadow: 0px 2px 4px 4px #f0f0f0;
    right: 16px;
    width: 260px;
    height: 200px;
    background-color: #ffffff;
    color: rgba(43, 43, 43, 1);
    line-height: 100px;
    text-align: center;
    transform: scale(0.8);
    transition: all 0.2s ease-out;
    transform-origin: right top;
    opacity: 0;
  }
  .toolBoxSHow{
    opacity: 1;
    transform: scale(1);
    display: block;
  }
  .toolBox div:not(:last-child){
    border-bottom: 1px solid #f0f0f0;
  }
  .header {
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }

  .header_img {
    width: 17px;
    height: 30px;
  }

  .title {
    text-align: center;
    flex: 1;
    font-size: 30px;
    color: #ffff;
  }

  .more {
    width: 10px;
    height: 30px;
  }

  .base_message {
    margin-bottom: 25px;
  }

  .inputGroup {
    border-bottom: 1px solid #efefef;
    box-sizing: border-box;
    padding: 36px 30px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    height: 98px;
  }

  .input_title {
    font-size: 28px;
    font-weight: 400;
    color: rgba(43, 43, 43, 1);
  }

  .input_value {
    text-align: right;
    flex: 1;
    font-size: 28px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .input_value::placeholder {
    font-size: 28px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .checkbox {
    position: relative;
    box-sizing: border-box;
    display: flex;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(153, 153, 153, 1);
    border-radius: 5px;
  }

  .flex {
    flex: 1;
  }

  .selected_img {
    position: absolute;
    left: -2px;
    top: -2px;
    transition: all 0.1s linear;
    opacity: 0;
    height: 30px;
    width: 30px;
  }

  .selected_show {
    opacity: 1;
  }

  .work_describe {
    background-color: #ffffff;
    padding: 31px 35px 31px 30px;
  }

  .work_title {
    font-size: 28px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(43, 43, 43, 1);
  }

  .work_text {
    padding: 30px 0 0 1px;
  }

  .work_p {
    width: 100%;
    font-size: 24px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 36px;
    word-spacing: 5px;
  }

  .work_p::placeholder {
    color: rgba(153, 153, 153, 1);
  }

  .workProve {
    background-color: #ffffff;
    padding: 36px 36px 29px 30px
  }

  .prove_title {
    margin-bottom: 30px;
    font-size: 28px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(43, 43, 43, 1);
  }

  .prove_explain {
    font-size: 24px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 36px;
  }

  .prove_picture {

  }

  .pic {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 180px;
    background: rgba(207, 207, 207, 1);
    margin-bottom: 23px;
  }

  .prove-add {
    width: 60px;
    height: 60px;
  }
</style>
